<template>
	<view class="my-order">
		<view class="acea-row nav">
			<view class="acea-row row-center-wrapper" :class="{on: status == ''}" @click="tab('')">全部</view>
			<view class="acea-row row-center-wrapper" :class="{on: status == 1}" @click="tab(1)">待付款</view>
			<view class="acea-row row-center-wrapper" :class="{on: status == 2}" @click="tab(2)">已付款</view>
			<view class="acea-row row-center-wrapper" :class="{on: status == 3}" @click="tab(3)">退款</view>
		</view>
		<view class="list">

			<view class='item' v-for="(item,index) in dataList" :key="index">
				<view @click="goDetails(item)">
					<view class='title acea-row row-between-wrapper'>
						<view class="acea-row row-middle left-wrapper">
							{{item.title}}
						</view>
						<view class='font-color' v-if="item.status == 0">待付款</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 0">已付款</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 1">审核中</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 2">已退款</view>
						<view class='font-color' v-if="item.status == 1 && item.refund_order == 3">拒绝退款</view>
						<view class='font-color' v-if="item.status == 2">已使用</view>
						<view class='font-color' v-if="item.status == 3">已过期</view>

					</view>

					<view class='item-info acea-row row-between row-top'>
						<view class='pictrue'>
							<image :src='item.thumb'></image>
						</view>
						<view class='right_info'> 
								<view class='name line2'>演出时间：{{item.start_time|formatDate}}</view>
								<view class='name line2'>数量：{{item.total}}张</view>
								<view class='name line2'>总价：¥{{item.price}}</view>
						</view>
					</view>

					<view class='bottom acea-row  row-middle'>
						<text>订票时间：{{item.add_time | formatDate}}</text>
						
						<view style="flex: 1;"></view>
						<!-- <view class='bnt cancelBnt' @click.stop="cancelOrder(item)"
							v-if="item.status == 1 && (item.refund_order == 0  || item.refund_order == 3) && item.is_refund == 1">退票</view> -->
						<view class='bnt bg-color' v-if="item.status == 0 && showBuy">立即支付</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="showCode"></view>
	</view>
</template>

<script>
	import {
		refund_order,
		show_orer_list
	} from '@/api/show_order.js'
	const app = getApp()
	export default {
		data() {
			return {
				dataList:[],
				page:1,
				limit:20,
				status: '',
				showCode: false,
				showBuy: app.globalData.temp_status != 1,
				is_hide:false,
				isLoadMore:false
			}
		},
		onLoad() {
			// this.setDataListReq(show_orer_list)
			// this.getDataList()
			this.loadData();
			// 监听刷新
			uni.$on('update', () => {
				this.tab(2)
			})
		},
		onHide(){
			this.is_hide = true;
		},
		onShow(){
			if(this.is_hide){
				this.tab(this.status);
				this.is_hide = false;
			}
		},
		methods: {
			onReachBottom(){  //上拉触底函数
				if(!this.hasMore){
					return false;
				}
				this.page++;
				this.loadData();
			},
			tab(status) {
				this.status = status;
				this.page = 1;
				this.loadData();
			},
			loadData(){
				let that = this;
				show_orer_list({status:this.status,page:this.page,limit:this.limit}).then(res => {
					uni.stopPullDownRefresh();
					if (res.status == 200) {
						if(res.data.list.length == that.limit){
							that.hasMore = true;
						}else{
							that.hasMore = false;
						}
						if(that.page == 1){
							let arr = [];
							res.data.list.map(function(item){
								arr.push(item);
							})
							that.dataList = arr;
						}else{
							if(res.data.list.length > 0){
								res.data.list.map(function(item){
									that.dataList.push(item);
								})
							}else{
								if(that.page > 1){
									that.page -= 1;
								}
							}
						}
					} else {
						_this.$util.Tips({
							title: res.message,
							icon: 'error'
						})
					}
					console.log(res);
				}).catch(er => {
					uni.stopPullDownRefresh();
					_this.$util.Tips({
						title: er,
						icon: 'error'
					})
				})
			},
			cancelOrder(item) {
				let _this = this
				uni.showModal({
					title: '退票',
					content: '确定要退票吗',
					success: function (res) {
						if (res.confirm) {
							refund_order(item.id).then(res => {
								if (res.status == 200) {
									_this.$util.Tips({
										title: res.message,
										icon: 'success'
									})
									_this.resetDataList()
									_this.setDataListPar({
										status: _this.status
									})
									_this.getDataList()
								} else {
									_this.$util.Tips({
										title: res.message,
										icon: 'error'
									})
								}
								console.log(res);
							}).catch(er => {
								_this.$util.Tips({
									title: er,
									icon: 'error'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				
				
			},
			goDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/2_development/user/platform_show_order_detail?order_sn=${item.order_sn}&id=${item.id}&sub_bill=${this.sub_bill}&day_time=${this.day_time}`
				})
			},
			onViewCode(item) {
				// this.showCode = true
				uni.previewImage({
					urls: [item.sn_url]
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./order-list.scss";
</style>
